<template>
  <header class="layoutHeader">
    <div class="btnGroups" v-if="true">
      <div class="controlVoice">
        <div class="btn" @click="selected" :class="{ seled: currentSelecBtn === 0 }">
          <div class="icon">
            <img src="./icon/selectedAll.svg" alt="" />
            <img src="./icon/noSelected.svg" alt="" />
          </div>
          <span>全选</span>
        </div>
        <div class="btn">按钮</div>
        <div class="btn">按钮</div>
        <div class="btn">按钮</div>
        <div class="btn">按钮</div>
      </div>

      <div class="controlList">
        <div class="btn">123</div>
        <div class="btn">123</div>
        <div class="btn">123</div>
        <div class="btn">123</div>
        <div class="btn">123</div>
      </div>
    </div>
    <!-- 音量
    <div class="vol">
      <el-slider :disabled="false" v-model="volume" @change="changeVol"> </el-slider>
    </div> -->
  </header>
</template>
<script>
export default {
  name: 'layoutHeader',
  data() {
    return {
      volume: 0,
      currentSelecBtn: -1 //当前选中的按钮
    };
  },
  methods: {
    changeVol(item) {
      // console.log('当前音量', item);
    },
    selected() {
      this.currentSelecBtn = 0;
      // console.log(this.currentSelecBtn);
    }
  }
};
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
